<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传中心 | 我的应用</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .upload-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .preview-area {
            border: 2px dashed #6c757d;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            margin: 1rem 0;
            transition: all 0.3s ease;
            background: white;
        }

        .preview-area:hover {
            border-color: #0d6efd;
            background: #f8fbff;
        }

        .preview-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 1rem;
            display: none;
        }

        .upload-progress {
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            background: #e9ecef;
            margin: 1rem 0;
            display: none;
        }

        .progress-bar {
            height: 100%;
            background: #0d6efd;
            transition: width 0.3s ease;
        }

        .upload-btn {
            position: relative;
            overflow: hidden;
            transition: transform 0.2s;
        }

        .upload-btn:hover {
            transform: translateY(-2px);
        }

        .file-input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .hidden-div {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .visible {
            opacity: 1;
            max-height: 1000px; /* 根据内容调整 */
        }
    </style>
</head>
<body class="bg-light">
<div class="container">
    <div class="upload-container">
        <h2 class="text-center mb-4">📷 图片识别</h2>

        <!-- 上传表单 -->
        <form method="POST" enctype="multipart/form-data" id="uploadForm">
            <!-- 拖拽区域 -->
            <div class="preview-area" id="dropZone">
                <div class="mb-3">
                    <i class="bi bi-cloud-upload fs-1 text-muted"></i>
                    <p class="text-muted mb-1">拖放图片到这里或点击选择</p>
                    <small class="text-muted">支持格式：JPEG, PNG, GIF（最大 16MB）</small>
                </div>
                <img id="imagePreview" class="preview-image">
            </div>

            <!-- 文件选择按钮 -->
            <button type="button" class="btn btn-primary w-100 upload-btn">
                选择文件
                <input type="file" name="file" class="file-input"
                       id="fileInput" accept="image/*">
            </button>

            <!-- 进度条 -->
            <div class="upload-progress" id="progressBar">
                <div class="progress-bar" style="width: 0%"></div>
            </div>

            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-success w-100 mt-3"
                    id="submitBtn" disabled>
                开始上传
            </button>
        </form>

        <!-- 上传结果展示 -->
        {% if filename %}
            <div class="mt-4 p-3 bg-white rounded">
                <div class="alert alert-success" role="alert">
                    ✅ 上传成功！图片已保存
                </div>
                <div class="text-center">
                    <img src="{{ url_for('uploaded_file', filename=filename) }}"
                         class="img-fluid rounded"
                         style="max-height: 400px;">
                    <div class="mt-2">
                        <a href="{{ url_for('uploaded_file', filename=filename) }}"
                           class="btn btn-outline-primary btn-sm"
                           target="_blank">
                            查看原图
                        </a>
                        <button style="float: right;" id="runBtn" value="{{ filename }}">开始识别</button>
                    </div>
                </div>
                <div id="animatedDiv" class="hidden-div">

                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    // 图片预览功能
    const fileInput = document.getElementById('fileInput');
    const imagePreview = document.getElementById('imagePreview');
    const dropZone = document.getElementById('dropZone');
    const submitBtn = document.getElementById('submitBtn');

    // 文件选择处理
    fileInput.addEventListener('change', function (e) {
        const file = e.target.files[0];
        handleFile(file);
    });

    // 拖拽处理
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.borderColor = '#0d6efd';
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.style.borderColor = '#6c757d';
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        const file = e.dataTransfer.files[0];
        fileInput.files = e.dataTransfer.files;
        handleFile(file);
    });

    function handleFile(file) {
        if (file) {
            // 显示预览
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
                submitBtn.disabled = false;
            }
            reader.readAsDataURL(file);
        }
    }

    // 模拟上传进度（实际项目需要配合后端实现）
    document.getElementById('uploadForm').addEventListener('submit', function (e) {
        const progressBar = document.getElementById('progressBar');
        const bar = progressBar.querySelector('.progress-bar');

        progressBar.style.display = 'block';
        let progress = 0;

        const interval = setInterval(() => {
            progress += 10;
            bar.style.width = progress + '%';

            if (progress >= 100) {
                clearInterval(interval);
            }
        }, 200);
    });

    {#运行后端代码#}
    document.getElementById('runBtn').addEventListener('click', async function () {
        // 禁用按钮防止重复点击
        const btn = this;
        file_name = btn.value
        btn.disabled = true;
        btn.textContent = '识别中...';

        fetch('/test', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                file_name: file_name
            })
        })
            .then(response => response.json())
            .then(data => {
                {#window.alert(data)#}
                // 更新页面内容
                document.getElementById('animatedDiv').innerHTML = `
                <div class="alert alert-success" style="text-align:center;">
                    <p>时间戳：${data.result}</p>
                </div>
            `;
            })
            .catch(error => {
                console.error('错误:', error);
                document.getElementById('result').innerHTML = '请求失败';
            })
            .finally(() => {

                btn.disabled = false;
                btn.textContent = '开始识别';
                document.getElementById('animatedDiv').classList.toggle('visible');

            })
    });


</script>
</body>
</html>

